<template>
  <div class="TodayBusinessPanel">
    <div class="TodayBusinessPanel-title">今日经营</div>
    <div class="TodayBusinessPanel-cards">
      <div class="TodayBusinessPanel-card" v-for="c in cards" :key="c.key">
        <div class="TodayBusinessPanel-card-label">{{ c.label }}</div>
        <div class="TodayBusinessPanel-card-value" :class="'is-' + c.key">{{ c.value }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getTodayBusiness } from '../../../api/systemApi.js'

const cards = ref([
  {key: 'purchase', label: '今日采购(单)', value: 0},
  {key: 'sales', label: '今日销售(单)', value: 0},
  {key: 'grossProfit', label: '今日毛利(¥)', value: 0},
  {key: 'profit', label: '今日利润(¥)', value: 0}
])

const loadToday = async () => {
  try {
    const res = await getTodayBusiness()
    if (res && typeof res === 'object') {
      const purchaseOrderCount = res.purchaseOrderCount ?? 0
      const salesOrderCount = res.salesOrderCount ?? 0
      const grossProfit = res.grossProfit ?? 0
      const profit = res.profit ?? 0
      cards.value = [
        {key: 'purchase', label: '今日采购(单)', value: purchaseOrderCount},
        {key: 'sales', label: '今日销售(单)', value: salesOrderCount},
        {key: 'grossProfit', label: '今日毛利(¥)', value: Number(grossProfit).toFixed(2)},
        {key: 'profit', label: '今日利润(¥)', value: Number(profit).toFixed(2)}
      ]
    }
  } catch (e) {
    // 静默失败，保留默认0
  }
}

onMounted(loadToday)
</script>
<style scoped lang="scss">
.TodayBusinessPanel {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
  transition: box-shadow .2s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08), 0 8px 20px rgba(0, 0, 0, .06);
  }

  &-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    text-align: left;
  }

  &-cards {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    flex: 1;
    align-content: start;
  }

  &-card {
    // 统一与 StoreStatusPanel 样式
    background: #f8f9fb;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    aspect-ratio: 1 / 1;
    overflow: hidden;

    &:hover {
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    }

    &-label {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }

    &-value {
      font-size: 22px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .5px;
      color: #409EFF;

      &.is-purchase {
        color: #E6A23C;
      }

      &.is-sales {
        color: #409EFF;
      }

      &.is-grossProfit {
        color: #67C23A;
      }

      &.is-profit {
        color: #67C23A;
      }
    }
  }
}
</style>
